<template>
  <BasicModal v-bind="$attrs" @register="registerModal" :title="title" @ok="handleSubmit" width="40%">
         <BasicForm @register="registerForm"/>

           <JVxeTable
                     ref="tableRef1"
                     stripe
                     toolbar
                     rowNumber
                     rowSelection
                     resizable
                     keepSource
                     :height="tableH"
                     :checkbox-config="{ range: true }"
                     :loading="table1.loading"
                     :columns="table1.columns"
                     :dataSource="table1.dataSource"
                   ></JVxeTable>
     </BasicModal>
</template>

<script lang="ts" setup>
  import {ref, computed, unref, reactive, onMounted} from 'vue';
    import {BasicModal, useModalInner} from '/@/components/Modal';
    import {BasicForm, useForm} from '/@/components/Form/index';
    import {formSchema} from '../BizOutbound.data';
    import {saveOrUpdate} from '../BizOutbound.api';

    import {jvcolumns} from '../BizOutboundProduct.data';
  import { JVxeTypes} from "@/components/jeecg/JVxeTable/src/types";

  import {defHttp} from '/@/utils/http/axios';
    import { JVxeTable } from '/src/components/jeecg/JVxeTable';
    //
      const tableRef1 = ref();
      const tableH = ref(300);
      const table1 = reactive({
        loading: false,
        dataSource: [],
        columns:jvcolumns,
      });


    // Emits声明
    const emit = defineEmits(['register','success']);
    const isUpdate = ref(true);
    //表单配置
    const [registerForm, {resetFields, setFieldsValue, validate}] = useForm({
        labelWidth: 150,
        schemas: formSchema,
        showActionButtonGroup: false,
    });
    //表单赋值
    const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {



      table1.dataSource=[]
        //重置表单
        await resetFields();
        setModalProps({confirmLoading: false,showCancelBtn:data?.showFooter,showOkBtn:data?.showFooter});
        isUpdate.value = !!data?.isUpdate;
        if (unref(isUpdate)) {
            //表单赋值
            await setFieldsValue({
                ...data.record,
            });

          let params = {
            'outboundId':data.record.id,
          };

            defHttp.get({ url: "biz/bizOutboundProduct/list" ,params}).then((response)=>{
              console.log(response)
              table1.dataSource=response.records
            })
        }
    });
    //设置标题
    const title = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));
    //表单提交事件
    async function handleSubmit(v) {
        try {
            let values = await validate();

            values.list=tableRef1.value.getTableData()

            console.log("values",values,tableRef1.value.getTableData())

            setModalProps({confirmLoading: true});
            //提交表单
            await saveOrUpdate(values, isUpdate.value);
            //关闭弹窗
            closeModal();
            //刷新列表
            emit('success', {isUpdate: isUpdate.value, values});
        } finally {
            setModalProps({confirmLoading: false});
        }
    }

  onMounted(() => {



    const columnConfig = table1.columns.find(column => column.type === JVxeTypes.select);
    if (columnConfig && columnConfig.optionUrl) {
      // 发起请求获取下拉选项数据
      defHttp.get({ url: columnConfig.optionUrl  }).then(response => {
        // 将获取的数据赋值给列配置的options属性
        columnConfig.options = response.map((item)=>{return  {title:item.productName,value:item.id }});


      }).catch(error => {
        console.error('获取下拉选项数据失败:', error);
      });
    }
  });
</script>

<style lang="less" scoped>

</style>
